// 由于 webpack 是基于 Node 进行构建的, 所有 webpack 的配置文件中, 任何合法的 Node 代码都是支持的.
var path = require('path')
// 在内存中, 根据制定的模板页面, 生成一份内存中的首页, 同时自动把打包好的 bundle 注入到页面底部
var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候, 工具会发现, 我们并没有提供要打包的文件的入口和出口文件, 此时他会检查项目根目录中的配置文件, 并读取这个文件, 就拿到了到处的这个配置对象, 然后根据这个对象, 进行打包构建

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),     // 指定模版文件路径
            filename:'index.html'   // 设置生成的内存页面名称
        }),
        new VueLoaderPlugin()
    ],

    
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理图片路径的 loader
            // limit 给定的值是图片的大小, 单位是 byte, 如果我们引用的图片, 大于或等于给定的 limit 值, 则不会被转为 base64 格式的字符串, 如果图片小于给定的 limit 值, 则会被转为 base64 的字符串. hash 值是32位的, :8 表示截取前八位
            { test: /\.(ttf|woff|woff2|eot|svg)$/, use: 'url-loader' },
            { test:/\.js$/, use:'babel-loader', exclude: /node_modules/ },
            { test: /.vue$/, use: 'vue-loader'} // 处理 .vue 文件的 loader

        ]
    },
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
            // "vue$": "vue/dist/vue.js"
        }
    }
}




